<template>
    <div class="comment">
        <div class="comment-top">
            <div>交流量：{{ commentList.length }}</div>
        </div>
        <el-scrollbar height="693px" always>
            <div class="comment-card" v-for="item, index in commentList" :key="index">
                <div class="avatar">
                    <el-avatar :size="55" fit="cover" :src="getImageUrl('avatar/' + item.avatar)" />
                </div>
                <div class="comment-rigth">
                    <div class="userName">
                        {{ item.author }}
                    </div>
                    <div class="comment-text">
                        {{ item.comment }}
                    </div>
                    <div class="comment-time">
                        发布于：{{ item.publish_time }}
                    </div>
                </div>
                <div class="is-liked" @click="changeLike(index)">
                    <div v-if="!item.is_liked" class="icon">
                        <img src="../../icons/like.svg" alt="">
                    </div>
                    <div v-else class="icon">
                        <img src="../../icons/liked.svg" alt="">
                    </div>
                </div>
                <span class="like-num">{{ item.liked_num }}</span>
            </div>
        </el-scrollbar>
        <div class="comment-publish">
            <el-input v-model="commentText" placeholder="快来一起交流吧"></el-input>
            <el-button @click="handlePublish">发布</el-button>
        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { useUserStore } from "../../store/useUserStore.js";
import { ElMessage } from "element-plus";

// 获取评论列表
const commentList = ref([{
    is_published: 0,
    author_id: 0,
    avatar: "",
    user: {
        user_avatar: "",
    },
}]);

const getCommentList = async () => {
    const res = await axios.get("/oasadapi/comment");
    commentList.value = res.data;
    console.log(commentList.value);
    if (commentList.value) {
        commentList.value = commentList.value.filter((item) => item.is_published == 1);
        commentList.value.forEach(item => {
            item.avatar = item.user.user_avatar;
        })
    }
}
onMounted(
    () => {
        getCommentList();
    }
)
// 加载图片
const getImageUrl = (url) => {
    // 里面可以根据需求写逻辑
    return new URL('../../assets/' + url, import.meta.url).href;
};
// 点赞
const changeLike = (index) => {
    if (!commentList.value[index].is_liked) {
        axios.post(`/oasadapi/comment/${commentList.value[index].id}`).then(() => {
            commentList.value[index].liked_num++;
        });
    }
    else {
        axios.post(`/oasadapi/comment/subnum/${commentList.value[index].id}`).then(() => {
            commentList.value[index].liked_num--;
        });
    }
    commentList.value[index].is_liked = !commentList.value[index].is_liked;

}

// 发布评论
const { user } = useUserStore();
const commentText = ref("");
const commentData = ref({
    author: user.user_name,
    avatar: user.user_avatar,
    comment: "",
})
const handlePublish = async () => {
    commentData.value.comment = commentText.value;
    if (commentText.value !== "") {
        axios.post(`/oasadapi/comment`, commentData.value).then(() => {
            ElMessage({
                message: "推送成功！管理员审核中...",
                type: "success"
            })
            commentText.value = "";
            getCommentList();
        }).catch(() => {
            ElMessage({
                message: "推送失败！",
                type: "error"
            })
        });
    } else {
        ElMessage({
            message: "请先输入评论！",
            type: "warning"
        })
    }

}

</script>

<style scoped lang="scss">
.comment {
    .comment-top {
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }

    .comment-card {
        // background: linear-gradient(#5a6bea, #1de9ed);
        width: 98%;
        display: flex;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 5px;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 10px;
            margin-right: 20px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }

        .comment-rigth {

            .userName {
                margin-bottom: 5px;
                color: #ccc;
            }

            .comment-text {
                margin-bottom: 5px;
            }

            .comment-time {
                margin-top: 10px;
                // margin-left: -63px;
                color: #ccc;
            }
        }

        .is-liked {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 70%;
            right: 10%;

            .icon {
                cursor: pointer;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .like-num {
            position: absolute;
            top: 70%;
            right: 8%;
        }
    }

    .comment-publish {
        display: flex;
        justify-content: center;
        width: 80%;
        margin: auto
    }
}
</style>